<template>
 <div class="search">
      <el-form
        :model="formInline"
        class="demo-form-inline"
        label-width="70px"
        label-position="right"
      >
        <el-row :gutter="20">
          <el-col :span="6">
            <span class="text">说明：目前支持学科和关键字条件筛选</span>
          </el-col>
          <el-col
            :span="6"
            :offset="12"
            style="display: flex; justify-content: flex-end"
          >
            <el-button
              type="success"
              size="small"
              class="el-icon-edit"
               @click="$router.push('new')"
              >新增用户</el-button
            >
          </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-top: 15px">
          <el-col :span="6">
            <el-form-item label="学科">
              <el-select
                v-model="formInline.subjectID"
                placeholder="请选择"

              >
                <el-option
                  v-for="item in subjectOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
           <el-form-item label="二级目录">
              <el-select v-model="formInline.catalogID" placeholder="请选择" @focus="focusSubject">
                <el-option
                  v-for="item in catalogOption"
                  :key="item.id"
                  :label="item.directoryName"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签">
              <el-select v-model="formInline.tags" placeholder="请选择">
                <el-option
                  v-for="item in tagsOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键词">
              <el-input
                v-model="formInline.keyword"
                placeholder="根据题干搜索"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="试题类型">
              <el-select v-model="formInline.questionType" placeholder="请选择">
                <el-option
                  v-for="item in questionTypeOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="难度">
              <el-select v-model="formInline.difficulty" placeholder="请选择">
                <el-option
                  v-for="item in difficultyOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方向">
              <el-select v-model="formInline.direction" placeholder="请选择">
                <el-option
                  v-for="item in directionOption"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入人">
              <el-select v-model="formInline.creatorID" placeholder="请选择">
                <el-option
                  v-for="item in creatorIDOption"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="题目备注">
              <el-input v-model="formInline.remarks" placeholder=""></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称">
              <el-input v-model="formInline.shortName" placeholder=""></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="城市">
              <el-select
                style="width: 49%; margin-right: 5px"
                v-model="formInline.province"
                placeholder="请选择"
                @change="changeCity"
              >
                <el-option
                  v-for="item in provincesOption"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>

              <el-select
                v-model="formInline.city"
                placeholder="请选择"
                style="width: 47%"
              >
                <el-option
                  v-for="item in areaOption"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="5">
            <div style="display: flex; justify-content: flex-end">
              <el-button @click="clear">清空</el-button>
              <el-button type="primary" @click="onSubmit">搜索</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
</template>

<script>
import { simpleSubject } from '@/api/hmmm/subjects'
import { list } from '@/api/hmmm/directorys'
import { simpleTag } from '@/api/hmmm/tags'
import { questionType, difficulty, direction } from '@/api/hmmm/constants'
import { simple } from '@/api/base/permissions'
import { provinces, citys } from '@/api/hmmm/citys'
export default {
  name: 'DkcSubject',
  components: {},
  props: {},
  data () {
    return {
      formInline: {
        subjectID: '',
        catalogID: '',
        tags: '',
        keyword: '',
        questionType: '',
        difficulty: '',
        direction: '',
        creatorID: '',
        remarks: '',
        shortName: '',
        province: '',
        city: ''

      },
      subjectOption: [],
      catalogOption: [],
      tagsOption: [],
      questionTypeOption: [],
      difficultyOption: [],
      directionOption: [],
      creatorIDOption: [],
      provincesOption: [],
      areaOption: []
    }
  },
  computed: {},
  watch: {},
  created () {
    this.simpleSubject()
    this.simpleTag()
    this.questionType()
    this.difficulty()
    this.direction()
    this.simple()
    this.provinces()
  },
  methods: {
    async simpleSubject () {
      const { data } = await simpleSubject()
      this.subjectOption = data
    },
    async focusSubject () {
      const { data } = await list({ subjectID: this.formInline.subjectID })

      this.catalogOption = data.items
    },
    async simpleTag () {
      const { data } = await simpleTag()

      this.tagsOption = data
    },
    async questionType () {
      const res = await questionType
      this.questionTypeOption = res
    },
    async difficulty () {
      const res = await difficulty

      this.difficultyOption = res
    },
    async direction () {
      const res = await direction
      this.directionOption = res
    },
    async simple () {
      const { data } = await simple()

      this.creatorIDOption = data
    },
    async provinces () {
      const res = await provinces()

      this.provincesOption = res
    },
    async changeCity () {
      const res = await citys(this.formInline.province)
      this.areaOption = res
      this.formInline.city = this.areaOption[0]
    },

    clear () {
      this.formInline = {}
      this.areaOption = []
    },
    onSubmit () {
      this.$emit('onSubmit', this.formInline)
    },
    add () {}

  }
}
</script>

<style scoped lang="scss">
 .search {
    .text {
      font-size: 12px;
      color: pink;
    }
  }
</style>
